<template>
  <div>
    <titleHead :title="'各区县统计'" />
    <!-- <el-col :span="12">
  <lineAndBar :height="'30vh'"/>
    </el-col> -->
    <el-col :span="24">
      <Echart
        :options="options"
        :id="'bottomLeftChart' + Math.random()"
        :height="'40rem'"
        width="100%"
      ></Echart>
    </el-col>
  </div>
</template>

<script>
import img from "./img/1@2x.png";
import lineAndBar from "@/components/echart/lineAndBar";
import Echart from "@/common/echart";
export default {
  data() {
    return {
      img,
      options: {
        title: {
          text: "World Population",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
        },
        yAxis: {
          type: "category",
          data: ["Brazil", "Indonesia", "USA", "India", "China", "World"],
        },
        series: [
          {
            name: "2012",
            type: "bar",
            data: [19325, 23438, 31000, 121594, 134141, 681807],
          },
          {
            name: "2013",
            type: "bar",
            data: [19325, 23438, 31000, 121594, 134141, 681807],
          },
        ],
      },
    };
  },
  components: { Echart },
  mounted() {
    this.getInfor();
  },
  methods: {
    getInfor() {
      this.getInfo({ key: "8-5-1-1" }).then((res) => {});
      this.getInfo({ key: "8-5-1-2" }).then((res) => {});
      this.getInfo({ key: "8-5-1-3" }).then((res) => {});
    },
  },
};
</script>

<style>
</style>